import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';

/**
 * 与truffle交互
 * 首先在react项目根目录安装需要的库
 * web3:  npm install web3 --save  /  yarn add web3
 * truffle-contract: npm install truffle-contract --save  / yarn add truffle-contract
 * npm install babel-plugin-import --save 暂时没有提示安装
 * 接着
 * 1. 链接合约
 * 2. 执行一下合约内部函数
 * 3. 添加ant design ui库支持
 * 4. 完成项目
 */
import Web3 from 'web3';
import TruffleContract from 'truffle-contract';
import AdoptionJson from './truffle/build/contracts/Adoption.json';
import { Button, Layout, Row, Col } from 'antd';
import pets from "./truffle/src/pets.json";

const { Header, Content, Footer } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    this.web3 = null;
    this.Adoption = null;  // 存储合约
    this.initAddress = '0x' + '0'.repeat(40); // 以太坊地址初始值
    this.init();
    this.state = {
      adopters: []
    };
  }

  async init() {
    if(window.ethereum) {
      await window.ethereum.enable();
      this.web3Provider = window.web3.currentProvider;
      this.web3 = new Web3(this.web3Provider);
      this.initAdoption();
    }else {
      alert('请安装metaMask！');
    }
  }

  initAdoption() {
    this.Adoption = TruffleContract(AdoptionJson);
    this.Adoption.setProvider(this.web3Provider);
    return this.markAdopted();
  }

  async markAdopted() {
    // 部署链接一下
    // await同步方式获取异步数据
    const adoptionInstance = await this.Adoption.deployed();
    const adopters = await adoptionInstance.getAdopters.call();
    this.setState({
      adopters: adopters
    });
    console.log(adopters);
  }

  async adopt(petId) {
    const account = window.web3.eth.defaultAccount;
    const adoptionInstance = await this.Adoption.deployed();
    await adoptionInstance.adopt(petId, {from:account});
    this.markAdopted();
  }

  isActive(i) {
    return this.state.adopters[i] === this.initAddress;
  }
  render() {
    return (
      <Layout className="layout">
        <Header></Header>
        <Content style={{ padding: '20px 50px' }}>
          <Row gutter={40}>
            {
              pets.map( (item, index) => {
                return (
                  <Col span={6} key={index}>
                    <img src={item.picture} style={{ width: '100%' }} alt={item.name} />
                    <div style={{ marginBottom: '20px', textAlign: 'center' }}>
                      <p className="name">{item.name}</p>
                      {
                        this.isActive(item.id)
                          ? <Button type="primary" onClick={()=>this.adopt(item.id)}>领养</Button>
                          : <Button type="primary" disabled>已被领养</Button>
                      }
                    </div>
                  </Col>
                )
              })
            }
          </Row>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Build Design ©2018 Created by Kuyoo
        </Footer>
      </Layout>
      // <Button type='primary' onClick={()=>this.adopt(2)}> 领养第二个 </Button>
    )
  }
}

export default App;
